<template>
	<div class="todosMain">
		<TodosHeader :addTodos="addTodos"></TodosHeader>
		<TodosList :todos="todos" :deleteTodos="deleteTodos" :changeTodos="changeTodos"></TodosList>
		<TodosFooter :todos="todos" :checkAllTodos="checkAllTodos" :clearSelected="clearSelected"></TodosFooter>
	</div>
</template>

<script>
import TodosHeader from './components/TodosHeader'
import TodosList from './components/TodosList'
import TodosFooter from './components/TodosFooter'
	
	export default {
		name:'App',
		data(){
			return {
				todos:[
					{done:true,title:'抽烟',id:'001'},
					{done:false,title:'喝酒',id:'002'},
					{done:true,title:'烫头',id:'003'}
				]
			}
			
		},
		methods:{
			addTodos(data){
				console.log(data)
				this.todos.unshift(data)
			},
			deleteTodos(id){
				this.todos = this.todos.filter(item => {
					return item.id !== id
				})
				console.log(this.todos)
			},
			changeTodos(id){
				this.todos.forEach(item => {
					if(item.id === id){
						item.done = !item.done
					}
				})
			},
			checkAllTodos(status){
				this.todos.forEach(item => item.done = status)
			},
			clearSelected(){
				this.todos = this.todos.filter(item => {
					return item.done !== true
				})
			}
		},
		computed:{
			
		},
		components:{ 
			TodosHeader,
			TodosList,
			TodosFooter
		}
		
	}
</script>

<style scoped>
	.todosMain{
		width: 300px;
	}
</style>